<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import VirtualList from '../components/VirtualList.vue'

// 懒加载组件示例
const LazyComponent = defineAsyncComponent(() => 
  import('../components/HeavyComponent.vue')
)

// 虚拟列表数据
const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  text: `Item ${i}`
}))

// 内存泄漏示例
const timer = ref<number>()
const count = ref(0)

onMounted(() => {
  // 设置一个定时器
  timer.value = window.setInterval(() => {
    count.value++
  }, 1000)
})

// 清理定时器，防止内存泄漏
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<template>
  <div class="performance-demo">
    <h2>性能优化示例</h2>

    <section>
      <h3>1. 组件懒加载</h3>
      <Suspense>
        <template #default>
          <LazyComponent />
        </template>
        <template #fallback>
          <div>Loading...</div>
        </template>
      </Suspense>
    </section>

    <section>
      <h3>2. 虚拟列表</h3>
      <VirtualList 
        :items="items"
        :itemHeight="50"
        :visibleItems="10"
      />
    </section>

    <section>
      <h3>3. 内存泄漏防范</h3>
      <p>计数器: {{ count }}</p>
      <p>这个定时器会在组件卸载时自动清理</p>
    </section>
  </div>
</template>

<style scoped>
.performance-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style> 